<template>
    <view class='page'>
        <u-navbar class="gradient-bg" title="添加银行卡" navbarType="0" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <view class="form box">
            <view class="evan-form-show">
                <evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="form" :rules="rules">
                    <evan-form-item label="账户姓名" prop="name">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.name" placeholder="请输入姓名" />
                    </evan-form-item>
                    <evan-form-item label="预留手机号" prop="mobile">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.mobile" placeholder="请输入手机号" />
                    </evan-form-item>
                    <evan-form-item label="身份证号" prop="idcard">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.idcard" placeholder="请输入身份证号" />
                    </evan-form-item>
                    <evan-form-item label="所属银行" prop="bank_name">
                        <picker class="picker" :range="bankList" range-key="name" :value="form.bank_name" @change="bankChange">
                            <view v-if="!form.bank_name" class="uni-input gray">请选择所属银行
                                <uni-icons style="margin-right:30rpx;" type="arrowright" color="#8f8f94" size="16" />
                            </view>
                            <view v-else class="uni-input">{{form.bank_name}}
                                <uni-icons style="margin-right:30rpx;" type="arrowright" color="#8f8f94" size="16" />
                            </view>
                        </picker>
                    </evan-form-item>
                    <evan-form-item label="开户地" prop="open_location">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.open_location" placeholder="请输入开户地" />
                    </evan-form-item>
                    <evan-form-item label="开户行" prop="open_bank">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.open_bank" placeholder="请输入开户行" />
                    </evan-form-item>
                    <evan-form-item label="银行卡号" prop="card_number">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.card_number" placeholder="请输入银行卡号" />
                    </evan-form-item>
                </evan-form>
            </view>
        </view>
        <view class="btn box">
            <view class="padding flex flex-direction">
                <button :disabled="disabled" @click="submit()" class="cu-btn bg-blue margin-tb-sm lg">{{ title }}</button>
                <button style="margin-top: 30rpx;" v-if="form.account_id" @click="show=true" class="cu-btn bg-blue margin-tb-sm lg">解除绑定</button>
            </view>
        </view>

        <u-modal :show="show" title="提示" content="您确定要解绑此银行卡？" showCancelButton @cancel="show=false" @confirm="unbinding" :asyncClose="true"></u-modal>
    </view>
</template>

<script>
import { getBanksLists, bindAccount, delAccount } from "@/api/withdrawal.js"
export default {
    components: {},
    data() {
        return {
            // 表单的内容必须初始化
            form: {
                name: '',
                idcard: '',
                mobile: '',
                bank_name: '',
                open_location: '',
                open_bank: '',
                card_number: '',
                bank_id: '',
                account_id: ''
            },
            rules: {
                name: {
                    required: true,
                    message: '请输入姓名'
                },
                idcard: [{
                    required: true,
                    message: '请输入身份证号'
                },
                {
                    validator: this.isidcard
                }
                ],
                mobile: [{
                    required: true,
                    message: '请输入手机号'
                },
                {
                    validator: this.isMobilePhone
                }
                ],
                open_location: {
                    required: true,
                    message: '开户地'
                },
                open_bank: {
                    required: true,
                    message: '开户行'
                },
                card_number: [{
                    required: true,
                    message: '请输入银行卡号'
                },
                {
                    validator: this.isBankCard
                }
                ],
                bank_name: {
                    required: true,
                    message: '请选择所属银行'
                },
            },
            loading: true,
            bankList: [],
            title: "立即绑定",
            show: false,
            type: '',//1提现时选择银行卡过来添加
        };
    },
    onLoad(query) {
        if (query) {
            if (query.type) {
                this.type = query.type
            }
            if (query.data) {
                let data = JSON.parse(decodeURIComponent(query.data))
                Object.keys(this.form).map(key => {
                    this.form[key] = data[key] ? data[key] : ''
                })
                this.form.account_id = data.id
                this.form.bank_name = data && data.bank ? data.bank.name : ''
                this.title = "修改绑定"
            }
        }
    },
    onShow() {
        this.getList()
    },
    mounted() {
        // 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        getList() {
            getBanksLists().then(res => {
                this.bankList = res.data
            })
        },
        bankChange(e) {
            let index = e.detail.value
            this.form.bank_id = this.bankList[index].id
            this.form.bank_name = this.bankList[index].name
        },
        isMobilePhone(rule, value, callback) {
            let chPhonePattern = /^1(3|4|5|6|7|8|9)\d{9}$/
            if (chPhonePattern.test(value) === false) {
                callback(new Error('手机号格式不正确'));
            } else {
                callback();
            }
        },
        isidcard(rule, value, callback) {
            let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            if (idcardReg.test(value) === false) {
                callback(new Error('身份证格式不正确'));
            } else {
                callback();
            }
        },
        isBankCard(rule, value, callback) {
            let bankCardReg = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18})$/;
            if (bankCardReg.test(value) === false) {
                callback(new Error('银行卡号格式不正确'));
            } else {
                callback();
            }
        },
        unbinding() {
            delAccount({ account_id: this.form.account_id }).then(res => {
                if (res.code == 1) {
                    this.$message("操作成功")
                    this.show = false
                    uni.navigateTo({
                        url: '/pagesB/withdrawal/bankCard'
                    })
                }
            })
        },
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    bindAccount(this.form).then(res => {
                        if (res.code == 1) {
                            this.$message("操作成功")
                            if (this.type == 1) {
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: '/pagesB/withdrawal/withdrawal'
                                    })
                                }, 500)
                            } else {
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: '/pagesB/withdrawal/bankCard'
                                    })
                                }, 500)
                            }

                        }
                    })
                }
            })
        },
    },
};
</script>
<style scoped lang='scss'>
.page {
  .form {
    background-color: #fff;
    border-radius: 5rpx;
    margin: 20rpx auto;
    .evan-form-show {
      padding: 0 20rpx 20rpx;
      .form-input {
        font-size: 28rpx;
        color: #333;
        // text-align: right;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        height: 100rpx;
        line-height: 50rpx;
        // text-indent: 36rpx;

        &.textarea {
          height: 240rpx;
          padding: 24rpx 0;
          text-align: left;
        }
      }

      .form-input-placeholder {
        font-size: 28rpx;
        color: #999;
      }

      &__button {
        width: 100%;
        height: 88rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 36rpx;
        color: #fff;
        margin-top: 20rpx;
        background-color: #2d87d5;

        &::before,
        &::after {
          border: none;
        }
      }

      .customize-form-item {
        &__label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
        }

        &__radio {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          &__text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }

    .picker {
      //   flex: 1;
      //   text-align: left;
      //   line-height: 45rpx;
      //   text-indent: 36rpx;

      //   .uni-input {
      //     display: flex;
      //     justify-content: space-between;
      //     align-items: center;
      //   }
      .gray {
        font-size: 28rpx;
        color: #777;
      }
    }
    picker {
      flex: 1;
      height: 87rpx;
      line-height: 87rpx;
      uni-icons {
        float: right;
        margin-right: 20rpx;
      }
    }
    /deep/.evan-form-item-container__label {
      font-size: 28rpx;
      color: #333333;
      width: 180rpx;
      text-align: justify;
      text-align-last: justify;
      padding-right: 36rpx;
      line-height: 50rpx;
    }
  }
  .btn {
    margin-top: 40rpx;
    button {
      background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
        linear-gradient(#ff6a00, #ff6a00);
      background-blend-mode: normal, normal;
      color: #ffffff;
    }
  }
}
</style>